<template>
	<view class="wf-box" :style="{ paddingTop: totalheight }">
		<HeadNav titleName="个人信息" :topheight="navBarHeight"></HeadNav>

		<view class="main">
			<view class="user-info">
				<view class="user-top">
					<image :src="userInfo.avatar" class="user-avt"></image>
					<view class="user-center">
						<view class="user-t1">
							<text class="name">{{ userInfo.nickname }}</text>
							<image src="../../static/img/me-02.png"></image>
						</view>

						<view class="user-t2">
							<text>ID:{{ userInfo.id }}</text>
							<!-- <image src="../../static/img/chat-30.png"></image> -->
						</view>
						
					</view>

					<view class="user-start" @click="jumpMeCode">
						<image src="../../static/img/me-04.png"></image>
					</view>
				</view>

				<view class="user-down">
					<view class="user-op-im" @click="setName">
						<text>设置别名</text>
						<image src="../../static/img/chat-32.png"></image>
					</view>
					<view class="user-op-im" @click="setHeadImage">
						<text>设置头像</text>
						<image src="../../static/img/chat-32.png"></image>
					</view>
					
					<!-- <view class="user-op-im" @click="jumpMailBox">
						<text>绑定邮箱</text>
						<image src="../../static/img/chat-32.png"></image>
					</view> -->
					
					<view class="user-op-im" @click="showTip()">
						<text>C圈</text>
						<image src="../../static/img/chat-32.png"></image>
					</view>
				</view>
			</view>

		</view>
		
		<uni-popup ref="popup" type="center">
			<view class="popup-box">
				<view class="popup-title">设置别名</view>
				<view class="popup-sub">
					<view>
						<input type="text" placeholder="设置别名" v-model="nickname">
					</view>
				</view>
				<view class="popup-footer">
					<view class="cancle" @click="close()">取消</view>
					<view class="confim" @click="setNicename()">保存</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="popup2" type="center">
			<view class="popup-box">
				<view class="popup-title">加入黑名单？</view>
				<view class="popup-stxt">
					加入黑名单，你将不会收到对方的信息， 并且你们相互看不到对方K圈的更新
				</view>
				<view class="popup-footer">
					<view class="cancle" @click="close()">取消</view>
					<view class="confim">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="popup3" type="center">
			<view class="popup-box">
				<view class="popup-title">删除好友？</view>
				<view class="popup-stxt">
					是否删除联系人《夜晚的星光》，并清空聊天记录
				</view>
				<view class="popup-footer">
					<view class="cancle" @click="close()">取消</view>
					<view class="confim">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { getMeUserAPI , updateUserApi , uploadImage} from '@/api/api.js'
	import HeadNav from "@/components/HeadNav"
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				nickname: '',
				userInfo: ''
			}
		},
		components: {
			HeadNav
		},
		mixins: [navBarMixin],
		methods: {
			// 获取本人信息
			async getMeUserInfo() {
				const res = await getMeUserAPI()
				if(!res.code) {
					this.userInfo = res.data
				}
			},
			
			jumpMeCode() {
				uni.navigateTo({
					url: '/pages/me/code'
				})
			},
			
			async setNicename() {
				if(!this.nickname) {
					uni.showToast({
						title: '请输入别名',
						icon: 'none'
					})
					return
				}
				
				const res = await updateUserApi({
					id: this.userInfo.id,
					nickname: this.nickname
				})
				if(!res.code) {
					uni.showToast({
						title:"修改成功",
						icon: 'none'
					});
					await this.getMeUserInfo()
					this.$store.commit("setUserInfo",this.userInfo);
					this.close()
				}
				
			},
			
			setName() {
				this.$refs.popup.open()
				// this.$refs.popup2.open()
			},
			async setHeadImage() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: function(res) {
						console.log('res===',res)
						// uploadImage
						that.handleUplaodImage(res.tempFilePaths[0])
						// const res = await uploadImage()
					}
				})
			},
			
			async handleUplaodImage(tempFile) {
				const res = await uploadImage(tempFile)
				const resData = JSON.parse(res)
				console.log('resData===',resData)
				
				if(!resData.code) {
					const rew = await updateUserApi({
						id: this.userInfo.id,
						avatar: resData.data
					})
					if(!rew.code) {
						uni.showToast({
							title: '上传成功',
							icon: 'none'
						})
						await this.getMeUserInfo()
						this.$store.commit("setUserInfo",this.userInfo);
					}else {
						uni.showToast({
							title: rew.msg,
							icon: 'none'
						})
					}
				}
			},
			
			jumpMailBox() {
				uni.navigateTo({
					url: '/pages/me/mailbox'
				})
			},
			
			showTip() {
				uni.showToast({
					title: '敬请期待',
					icon: 'none'
				})
				// uni.scanCode({
				// 	success: function(res) {
				// 		console.log(res)
				// 	}
				// })
			},
			
			close() {
				this.$refs.popup.close()
				this.$refs.popup2.close()
			}
		},
		onLoad() {
			this.getMeUserInfo()
		}

	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;
		
		.head-more {
			width: 48rpx;
			height: 48rpx;
		}

		.main {
			padding: 0 30rpx;
			margin-top: 30rpx;
			box-sizing: border-box;

			.user-info {
				height: 1030rpx;
				background: #fff;
				border-radius: 10rpx;
				padding: 0 30rpx;
				padding-top: 36rpx;
				padding-bottom: 56rpx;
				background: #fff;
				box-sizing: border-box;
				border-radius: 10rpx;

				.user-top {
					display: flex;
					align-items: center;

					.user-avt {
						border-radius: 50%;
						width: 80rpx;
						height: 80rpx;
					}

					.user-center {
						margin-left: 20rpx;

						// display: flex;
						// flex-direction: column;
						// justify-content: space-between;
						.user-t1 {
							display: flex;
							align-items: center;

							.name {
								color: #333;
								font-size: 28rpx;
								font-weight: bold;
							}

							image {
								margin-left: 14rpx;
								width: 100rpx;
								height: 38rpx;
							}
						}

						.user-t2 {
							display: flex;

							text {
								color: #6C6B6B;
							}

							image {
								margin-left: 12rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}

						.user-t3 {
							image {
								width: 36rpx;
								height: 36rpx;
							}
						}
					}

					.user-start {
						margin-left: auto;

						image {
							width: 48rpx;
							height: 48rpx;
						}
					}

				}

				.user-down {
					margin-top: 12rpx;

					.user-op-im {
						display: flex;
						align-items: center;
						height: 110rpx;
						border-bottom: 2rpx solid #eee;

						text {
							font-size: 28rpx;
							color: #333;
						}

						image {
							margin-left: auto;
							width: 10rpx;
							height: 20rpx;
						}
					}
				}

			}

			.opertion-more {
				margin-top: 30rpx;
				padding: 0 30rpx;
				background: #fff;
				border-radius: 10rpx;

				.opertion-im {
					height: 108rpx;
					line-height: 108rpx;
					text-align: center;
					color: #333;
				}
			}

		}

		.operate-list {
			position: absolute;
			top: 0;
			width: 100%;
			min-height: 100%;
			background: transparent;

			.oper-mil {
				position: fixed;
				// top: 96rpx;
				right: 26rpx;
				width: 220rpx;

				// height: 276rpx;
				// background: red;
				.operate-nbox {
					width: 100%;
					height: 100%;
					padding: 12rpx 0 0;
					background: url('../../static/img/chat-03.png') no-repeat;
					background-size: 100% 100%;
					box-sizing: border-box;

					.oper-im {
						padding: 0 30rpx;

						.oper-im-bwarp {
							padding: 15rpx 0;
							display: flex;
							// justify-content: space-between;
						}

						image {
							width: 48rpx;
							height: 48rpx;
						}

						text {
							margin-left: 16rpx;
							color: #fff;
							font-size: 24rpx;
						}
					}


				}
			}
		}
	
		.popup-box {
			width: 583rpx;
			height: 580rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			background: #fff;
			background: url('../../static/img/me-32.png') no-repeat;
			background-size: cover;
			overflow: hidden;
			.popup-title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				text-align: center;
				margin-top: 224rpx;
			}
			.popup-sub {
				margin-top: 36rpx;
				height: 80rpx;
				padding: 0 50rpx;
				
				view {
					height: 100%;
					padding: 0 40rpx;
					border-radius: 8rpx;
					background: #F4F4F4;
				}
				input {
					height: 100%;
					font-size: 24rpx;
					background: #F4F4F4;
				}
			}
			
			.popup-stxt {
				margin-top: 45rpx;
				color: #666;
				text-align: center;
			}
			.popup-footer {
				display: flex;
				justify-content: space-between;
				margin-top: 50rpx;
				padding: 0 50rpx;
				.cancle {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border: 2rpx solid #3F93FF;
					border-radius: 40rpx;
				}
				.confim {
					width: 200rpx;
					line-height: 76rpx;
					text-align: center;
					border-radius: 40rpx;
					background: #3F93FF;
					color: #fff;
				}
			}
		}
	}
</style>